<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>选择器的使用</title>
    <style>
        td, th {
            padding: 10px;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <table border="1px">
        <tr>
            <th>序号</th>
            <th>姓名</th>
            <th>联系电话</th>
            <th>操作</th>
        </tr>
        <tr>
            <td>1</td>
            <td>张三</td>
            <td>110120</td>
            <td><button>隐藏</button></td>
        </tr>
        <tr>
            <td>2</td>
            <td>李四</td>
            <td>110120</td>
            <td><button>隐藏</button></td>
        </tr>
        <tr>
            <td>3</td>
            <td>王五</td>
            <td>110120</td>
            <td><button>隐藏</button></td>
        </tr>
        <tr>
            <td>4</td>
            <td>陈晨</td>
            <td>110120</td>
            <td><button>隐藏</button></td>
        </tr>
    </table>

    <script>
    $(document).ready(function() {
        $('table tr').css('font-size', '20px');

        $('table tr:first').css({
            'background': '#c2e9fb',
            'font-size': '20px'
        });

        $('table tr:gt(0):even').css('background', '#a1c4fd');

        $('table td').filter(function(){
            return $(this).text().trim() === '陈晨';
        }).css('color', '#F00');

        $('table button').click(function(){
            if(confirm('确定隐藏吗')) {
                $(this).closest('tr').hide();
            }
        });
    });
    </script>
</body>
</html>
